<template>
  <div v-html="result" />
</template>
<script setup lang="ts">
import MarkdownIt from "markdown-it";
import MarkdownItHighlight from "markdown-it-highlightjs";
import Emoji from "markdown-it-emoji";

interface Props {
  content?: string;
  html?: boolean;
  xhtmlOut?: boolean;
  breaks?: boolean;
  linkify?: boolean;
  typographer?: boolean;
}

const props = defineProps<Props>();
// 实例化 Markdown 编译器
const md = new MarkdownIt().use(MarkdownItHighlight, {}).use(Emoji).set({
  html: props.html,
  xhtmlOut: props.xhtmlOut,
  breaks: props.breaks,
  linkify: props.linkify,
  typographer: props.typographer,
});

const result = computed(() => md.render(props.content ?? ""));
</script>
<style>
/* Comment */
.hljs-comment,
.hljs-quote {
  @apply text-warning;
}

/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  @apply text-error;
}

.hljs-name {
  @apply text-accent;
}

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  @apply text-accent;
}

/* Yellow */
.hljs-attribute {
  @apply text-warning;
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  @apply text-success;
}

/* Blue */
.hljs-title,
.hljs-section {
  @apply text-info;
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  @apply text-secondary/60;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

@media screen and (-ms-high-contrast: active) {
  .hljs-addition,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-bullet,
  .hljs-comment,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-string,
  .hljs-symbol,
  .hljs-type,
  .hljs-quote {
    @apply text-info;
  }

  .hljs-keyword,
  .hljs-selector-tag {
    font-weight: bold;
  }
}
</style>
